<!--  -->
<template>
  <div class="user">
    <cnp>
      <h1 class="title">用户管理</h1>
    </cnp>
    <saixuan>
      <el-input placeholder="输入用户名或手机号......" v-model="inpVal" clearable></el-input>
    </saixuan>
    <div class="Order-main">
      <tit>
        <span>用户列表</span>
      </tit>
      <div>
        <userdata></userdata>
        <user-list :bbb="xian"></user-list>
        <div class="foot">
          <label for="che">
            <input type="checkbox" id="che" style="margin-right:10px;" @click="quanxian" />全选
          </label>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cnp from "../components/biaoti";
import saixuan from "../components/saixuan";
import tit from "../components/tit";
import userdata from "../components/UserData";
import UserList from "../components/User-list";

export default {
  components: {
    cnp,
    saixuan,
    tit,
    userdata,
    UserList,
  },
  data() {
    //这里存放数据
    return {
      inpVal: "",
      xian: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    quanxian() {
      if (this.xian) {
        this.xian = false;
      } else {
        this.xian = true;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
.user {
  width: 1140px;
  margin: 0 auto;
}
.title {
  border-width: 0px;
  position: relative;
  top: 0px;
  width: 97px;
  height: 36px;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  color: #9137f3;
  width: 97px;
}
.Order-main {
  margin: 0 auto;
  border-width: 0px;
  position: relative;
  top: 20px;
  width: 1100px;
  height: 1163px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(228, 228, 228, 1);
  border-radius: 0px;
}
.foot {
  position: relative;
  top: 65px;
  left: 85px;
}
.fenye {
  float: right;
  margin-right: 120px;
}
</style>